<div class="row nav nav-boxes mv-30 notifier-types">
  {{#each types as |item|}}
    <a
      {{action "switchType" item.type}}
      class="col span-2 nav-box-item driver {{if (eq item.type 'smtp') 'email'}} {{if (eq item.type currentType) 'active' ''}}"
      disabled={{item.disabled}}
      alt={{item.type}}
    >
      <div class="{{item.type}}"></div>
      {{#if item.label}}
        <p>{{t item.label}}</p>
      {{/if}}
    </a>
  {{/each}}
</div>
<hr />

{{#if (eq currentType 'slack')}}
  <div class="row">
    <div class="col span-12 mt-0 mb-0">
      {{form-name-description
          name=model.name
          nameDisabled=false
          nameRequired=true
          description=model.description
          bothColClass="col span-6 mt-0"
          colClass="col span-12 mt-0"
      }}
    </div>
  </div>
  <div class="row">
    <div class="col span-12">
      <div class="acc-label text-capitalize">{{t 'notifierPage.slack.url'}}{{field-required}}</div>
      {{input
          classNames="form-control"
          value=model.slackConfig.url
          placeholder=(t 'notifierPage.slack.urlPlaceholder')
      }}
    </div>
  </div>
  <div class="row">
    <div class="col span-12">
      <div class="acc-label text-capitalize">{{t 'notifierPage.slack.defaultRecipient.label'}}{{field-required}}</div>
      {{input
          classNames="form-control"
          value=model.slackConfig.defaultRecipient
          placeholder=(t 'notifierPage.slack.defaultRecipientPlaceholder')
      }}
      <p class="help-block text-info text-small">{{t 'notifierPage.slack.defaultRecipient.helpText'}}</p>
    </div>
  </div>
{{else if (eq currentType 'email')}}
  <div class="row">
    <div class="col span-12 mt-0 mb-0">
      {{form-name-description
          name=model.name
          nameDisabled=false
          nameRequired=true
          description=model.description
          bothColClass="col span-6 mt-0"
          colClass="col span-12 mt-0"
      }}
    </div>
  </div>

  <div class="acc-label text-capitalize">{{t 'notifierPage.smtp.server'}}</div>
  <section class="box">
    <div>
      <div class="acc-label text-capitalize">{{t 'notifierPage.smtp.sender'}}{{field-required}}</div>
      {{input
          type="text"
          autocomplete="off"
          classNames="form-control"
          value=model.smtpConfig.sender
      }}
    </div>

    <div class="row">
      <div class="col span-6">
        <div class="acc-label text-capitalize">{{t 'notifierPage.smtp.host'}}{{field-required}}</div>
        {{input
            classNames="form-control"
            value=model.smtpConfig.host
            placeholder=(t 'notifierPage.smtp.hostPlaceholder')
        }}
      </div>
      <div class="col span-4">
        <div class="acc-label text-capitalize">{{t 'notifierPage.smtp.port'}}{{field-required}}</div>
        {{input classNames="form-control" value=model.smtpConfig.port placeholder=(t 'notifierPage.smtp.portPlaceholder')}}
      </div>
      <div class="col span-2" style="margin-top: 43px;">
        {{input type="checkbox" classNames="form-control" checked=model.smtpConfig.tls}} Use TLS
      </div>
    </div>
    <div class="row">
      <div class="col span-6">
        <div class="acc-label text-capitalize">{{t 'notifierPage.smtp.userName'}}</div>
        {{input
            classNames="form-control"
            autocomplete="off"
            value=model.smtpConfig.username
            placeholder=(t 'notifierPage.smtp.userNamePlaceholder')
        }}
      </div>
      <div class="col span-6">
        <div class="acc-label text-capitalize">{{t 'notifierPage.smtp.password'}}</div>
        {{input
            type="password"
            autocomplete="off"
            classNames="form-control"
            value=model.smtpConfig.password
            placeholder=(t 'notifierPage.smtp.passwordPlaceholder')
        }}
      </div>
    </div>
  </section>
  <div class="row">
    <div class="col span-6">
      <div class="acc-label text-capitalize">{{t 'notifierPage.smtp.defaultRecipient.label'}}{{field-required}}</div>
      {{input
          classNames="form-control"
          value=model.smtpConfig.defaultRecipient
          placeholder=(t 'notifierPage.smtp.defaultRecipientPlaceholder')
      }}
      <p class="help-block text-info text-small">{{t 'notifierPage.smtp.defaultRecipient.helpText'}}</p>
    </div>
  </div>
{{else if (eq currentType 'pagerduty')}}
  <div class="row">
    <div class="col span-12 mt-0 mb-0">
      {{form-name-description
          name=model.name
          nameDisabled=false
          nameRequired=true
          description=model.description
          bothColClass="col span-6 mt-0"
          colClass="col span-12 mt-0"
      }}
    </div>
  </div>
  <div class="row">
    <div class="col span-12">
      <div class="acc-label text-capitalize">{{t 'notifierPage.pagerduty.serviceKey.label'}}{{field-required}}</div>
      {{input
          classNames="form-control"
          value=model.pagerdutyConfig.serviceKey
          placeholder=(t 'notifierPage.pagerduty.serviceKeyPlaceholder')
      }}
    </div>
    <p class="help-block text-info text-small">{{t 'notifierPage.pagerduty.serviceKey.helpText'}}</p>
  </div>
{{else if (eq currentType 'wechat')}}
  <div class="row">
    <div class="col span-12 mt-0 mb-0">
      {{form-name-description
          name=model.name
          nameDisabled=false
          nameRequired=true
          description=model.description
          bothColClass="col span-6 mt-0"
          colClass="col span-12 mt-0"
      }}
    </div>
  </div>
  <div class="row">
    <div class="col span-6">
      <div class="acc-label text-capitalize">{{t 'notifierPage.wechat.corp.label'}}{{field-required}}</div>
      {{input
          classNames="form-control"
          value=model.wechatConfig.corp
          placeholder=(t 'notifierPage.wechat.corpPlaceholder')
      }}
      <p class="help-block">{{t 'notifierPage.wechat.corp.helpText' htmlSafe=true}}</p>
    </div>
    <div class="col span-6">
      <div class="acc-label text-capitalize">{{t 'notifierPage.wechat.agent.label'}}{{field-required}}</div>
      {{input
          classNames="form-control"
          value=model.wechatConfig.agent
          placeholder=(t 'notifierPage.wechat.agentPlaceholder')
      }}
      <p class="help-block">{{t 'notifierPage.wechat.agent.helpText' htmlSafe=true}}</p>
    </div>
  </div>
  <div class="row">
    <div class="col span-6">
      <div class="acc-label text-capitalize">{{t 'notifierPage.wechat.secret.label'}}{{field-required}}</div>
      {{input
          classNames="form-control"
          value=model.wechatConfig.secret
          placeholder=(t 'notifierPage.wechat.secretPlaceholder')
      }}
      <p class="help-block">{{t 'notifierPage.wechat.secret.helpText' htmlSafe=true}}</p>
    </div>
    <div class="col span-6">
      <div class="acc-label text-capitalize">{{t 'notifierPage.wechat.recipientType.label'}}{{field-required}}</div>
      {{new-select
          localizedLabel=true
          classNames="form-control"
          content=recipientTypes
          value=model.wechatConfig.recipientType
      }}
    </div>
  </div>
  <div class="row">
    <div class="col span-12">
      <div class="acc-label text-capitalize">{{t 'notifierPage.wechat.defaultRecipient.label'}}{{field-required}}</div>
      {{input
          classNames="form-control"
          value=model.wechatConfig.defaultRecipient
          placeholder=(t 'notifierPage.wechat.defaultRecipientPlaceholder')
      }}
    </div>
  </div>
{{else if (eq currentType 'webhook')}}
  <div class="row">
    <div class="col span-12 mt-0 mb-0">
      {{form-name-description
          name=model.name
          nameRequired=true
          nameDisabled=false
          description=model.description
          bothColClass="col span-6 mt-0"
          colClass="col span-12 mt-0"
      }}
    </div>
  </div>
  <div class="row">
    <div class="col span-12">
      <div class="acc-label text-capitalize">{{t 'notifierPage.webhook.url'}}{{field-required}}</div>
      {{input
          classNames="form-control"
          value=model.webhookConfig.url
          placeholder=(t 'notifierPage.webhook.urlPlaceholder')
      }}
    </div>
  </div>
{{/if}}

{{#if (eq currentType 'slack')}}
  <div class="">
    {{t 'notifierPage.slack.helpText' htmlSafe=true}}
  </div>
{{/if}}

{{top-errors errors=errors}}

{{#if (eq currentType 'pagerduty')}}
  {{t 'notifierPage.pagerduty.helpText' htmlSafe=true}}
{{/if}}

<div class="over-hr mt-40">
  <span>
    {{#if testing}}
      <button
        style="color: white;"
        class="btn bg-info btn-disabled"
        {{action "test"}}
      >
        <i class="icon icon-spinner icon-spin"></i>{{t 'notifierPage.testAction.testing'}}
      </button>
    {{else}}
      {{#if tested}}
        <button
          {{action "test"}}
          class="btn  btn-disabled {{if testOk 'bg-success' 'bg-error'}}"
          style="color: white;"
        >
          {{if testOk (t 'notifierPage.testAction.testOk') (t 'notifierPage.testAction.testFailed')}}
        </button>
      {{else}}
        <button
          {{action "test"}}
          class="btn bg-info"
          style="color: white;"
        >
          {{t 'notifierPage.testAction.test'}}
        </button>
      {{/if}}
    {{/if}}
  </span>
</div>

<div class="footer-actions">
  {{save-cancel createLabel=addBtnLabel save="save" cancel="cancel"}}
</div>
